<template>
  <view class="custom-tabbar" :class="{ 'is-home': current === 0 }">
    <view class="tabbar-content" :style="safeAreaStyle">
      <view 
        v-for="(item, index) in tabList" 
        :key="index"
        class="tabbar-item"
        :class="{ active: current === index }"
        @click="switchTab(item.path, index)"
      >
        <image 
          class="tabbar-icon" 
          :src="current === index ? item.selectedIcon : item.icon"
        />
        <text class="tabbar-text">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current:  uni.getStorageSync('tabbarCurrent') || 0,
      safeAreaBottom: 0,
      tabList: [
        { 
          text: '首页', 
          path: 'pages/index/index',
          icon: '../../static/tabbar/indexpng.png',
          selectedIcon: '../../static/tabbar/indexpng1.png'
        },
        { 
          text: '分类', 
          path: 'pages/classify/classify',
          icon: '../../static/tabbar/fl.png',
          selectedIcon: '../../static/tabbar/fl1.png'
        },
        { 
          text: '购物车', 
          path: 'pages/ShoppingCart/ShoppingCart',
          icon: '../../static/tabbar/cart.png',
          selectedIcon: '../../static/tabbar/cart1.png'
        },
        { 
          text: '我的', 
          path: 'pages/mine/mine',
          icon: '../../static/tabbar/minepng.png',
          selectedIcon: '../../static/tabbar/minepng1.png'
        }
      ]
    }
  },
  computed: {
    safeAreaStyle() {
      return {
        paddingBottom: `${this.safeAreaBottom}px`
      }
    }
  },
  mounted() {
    this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom || 0

    // 监听页面切换
    uni.onAppRoute((res) => {
      const index = this.tabList.findIndex(item => 
        item.path === res.path.replace(/^\//, '')
      );
      if (index >= 0) {
        this.current = index;
        uni.setStorageSync('tabbarCurrent', index);
      }
    });
  },
  methods: {
    switchTab(path, index) {
      this.current = index;
      uni.setStorageSync('tabbarCurrent', index);
      uni.switchTab({ url: '/' + path });
    }
  }
}
</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 900;
}

.tabbar-content {
  display: flex;
  height: 100rpx;
  position: relative;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

/* 在首页时给分类和购物车之间添加间隙 */
.tabbar-item:nth-child(2) {
  margin-right: calc(var(--gap) * 1);
}
.tabbar-item:nth-child(3) {
  margin-left: calc(var(--gap) * 1);
}
:root {
  --gap: 0rpx;
}
.is-home {
  --gap: 36rpx; /* 间隙大小 */
}

.tabbar-item:active {
  opacity: 0.7;
  transform: scale(0.98);
}

.tabbar-item.active {
  color: #3bae43;
}

.tabbar-icon {
  width: 50rpx;
  height: 50rpx;
  position: relative;
}

.tabbar-text {
  font-size: 22rpx;
  color: #999;
  margin-top: 6rpx;
}

.tabbar-item.active .tabbar-text {
  color: #3bae43;
}

.badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background: #3bae43;
  color: white;
  border-radius: 50%;
  min-width: 36rpx;
  height: 36rpx;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6rpx;
}

.safe-area {
  height: env(safe-area-inset-bottom);
  background: #fff;
}
</style>